<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menus and toolbars in Mono Winforms</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Winforms, Mono, C#, menus, toolbars, programming, tutorial">
<meta name="description" content="Menus and toolbars in Mono Winforms">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href=".." title="Home">Contents</a>


<h1>Menus and toolbars in Mono Winforms</h1>


<p>
In this part of the Mono Winforms tutorial, we will talk about menus and toolbars. 
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 

<p>
A menubar is one of the most visible parts of the GUI application. It is a group 
of commands located in various menus. While in console applications you had to 
remember all those arcane commands, here we have most of the commands grouped into 
logical parts. There are accepted standards that further reduce the amount of time 
spending to learn a new application. 
</p>


<h2>Simple menu</h2>

<p>
In the first example, we create a simple menu. 
</p>


<div class="codehead">simplemenu.cs</div>
<pre class="code">
using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {
    public MForm() {
        Text = "Simple menu";

        MenuStrip ms = new MenuStrip();
        ms.Parent = this;
        
        ToolStripMenuItem file = new ToolStripMenuItem("&amp;File");          
        ToolStripMenuItem exit = new ToolStripMenuItem("&amp;Exit", null,
            new EventHandler(OnExit));          
        exit.ShortcutKeys = Keys.Control | Keys.X;
        file.DropDownItems.Add(exit);

        ms.Items.Add(file);
        MainMenuStrip = ms;
        Size = new Size(250, 200);

        CenterToScreen();
    }

    void OnExit(object sender, EventArgs e) {
       Close();
    }
}

class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}
</pre>

<p>
In our example, we have a menubar and one menu. Inside a menu there is 
one menu item. If we select the menu item, application is closed. 
</p>

<p>
Notice the ways how we can close the application. We can close it by using 
the Ctrl+X shorcut or by pressing Alt, F, E keys. 
</p>

<pre class="explanation">
 MenuStrip ms = new MenuStrip();
</pre>

<p>
<b class="keyword">MenuStrip</b> creates a menu system for our form. We add 
<b class="keyword">ToolStripMenuItem</b> objects to the MenuStrip that represent 
the individual menu commands in the menu structure. Each <b class="keyword">ToolStripMenuItem</b> 
can be a command for your application or a parent menu for other submenu items.
</p>

<pre class="explanation">
 ToolStripMenuItem file = new ToolStripMenuItem("&amp;File");          
</pre>

<p>
Here we create a menu.
</p>

<pre class="explanation">
 ToolStripMenuItem exit = new ToolStripMenuItem("&amp;Exit", null,
     new EventHandler(OnExit));   
</pre>

<p>
This line creates the exit menu item.
</p>

<pre class="explanation">
 exit.ShortcutKeys = Keys.Control | Keys.X;
</pre>

<p>
We provide a shortcut for the exit menu item.
</p>

<pre class="explanation">
 file.DropDownItems.Add(exit);
</pre>

<p>
The exit menu item is added to the drop down items of the menu object. 
</p>

<pre class="explanation">
 ms.Items.Add(file);          
</pre>

<p>
Here we add the menu object into the menu strip. 
</p>

<pre class="explanation">
 MainMenuStrip = ms;
</pre>

<p>
The <b class="keyword">MenuStrip</b> is plugged into the form. 
</p>


<br>
<img src="/img/gui/sharpwinf/simplemenu.png" alt="Simple menu">
<div class="figure">Figure: Simple menu</div>


<h2>Submenu</h2>

<p>
Each menu item can also have a submenu. This way we can group similar 
commnads into groups. For example we can place commands that hide/show 
various toolbars like personal bar, address bar, status bar or navigation 
bar into a submenu called toolbars.
</p>

<div class="codehead">submenu.cs</div>
<pre class="code">
using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {

    public MForm() {
        Text = "Submenu";

        MenuStrip ms = new MenuStrip();
        ms.Parent = this;

        ToolStripMenuItem file = new ToolStripMenuItem("&amp;File");   
        ToolStripMenuItem exit = new ToolStripMenuItem("&amp;Exit", null,
            new EventHandler(OnExit));       

        ToolStripMenuItem import = new ToolStripMenuItem();
        import.Text = "Import";

        file.DropDownItems.Add(import);

        ToolStripMenuItem temp = new ToolStripMenuItem();
        temp.Text = "Import newsfeed list...";
        import.DropDownItems.Add(temp);

        temp = new ToolStripMenuItem();
        temp.Text = "Import bookmarks...";
        import.DropDownItems.Add(temp);

        temp = new ToolStripMenuItem();
        temp.Text = "Import mail...";
        import.DropDownItems.Add(temp);

        file.DropDownItems.Add(exit);

        ms.Items.Add(file);
        MainMenuStrip = ms;
        Size = new Size(380, 200);

        CenterToScreen();
    }

    void OnExit(object sender, EventArgs e) {
       Close();
    }
}

class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}
</pre>

<p>
In this example, we create one submenu. The submenu Import has three menu items. 
</p>

<pre class="explanation">
 ToolStripMenuItem import = new ToolStripMenuItem();
 import.Text = "Import";
</pre>

<p>
A <b class="keyword">ToolStripMenuItem</b> can be a menu or a menu item. 
Here it will act as a submenu.
</p>

<pre class="explanation">
 ToolStripMenuItem temp = new ToolStripMenuItem();
 temp.Text = "Import newsfeed list...";
 import.DropDownItems.Add(temp);
</pre>

<p>
Here we create a menu item and add it to the Import submenu.
</p>


<br>
<img src="/img/gui/sharpwinf/submenu.png" alt="Submenu">
<div class="figure">Figure: Submenu</div>


<h2>Check menu item</h2>

<p>
The next code example demonstrates, how to create a checked menu item. 
</p>

<div class="codehead">checkmenuitem.cs</div>
<pre class="code">
using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {

    private StatusBar sb;
    private MenuItem viewStatusBar;

    public MForm() {
        Text = "Check menu item";

        sb = new StatusBar();
        sb.Parent = this;
        sb.Text = "Ready";

        MainMenu mainMenu = new MainMenu();

        MenuItem file = mainMenu.MenuItems.Add("&amp;File");          
        file.MenuItems.Add(new MenuItem("E&amp;xit", 
            new EventHandler(OnExit), Shortcut.CtrlX));

        MenuItem view = mainMenu.MenuItems.Add("&amp;View");
        viewStatusBar = new MenuItem("View StatusBar");
        viewStatusBar.Checked = true;
        viewStatusBar.Click += new EventHandler(ToggleStatusBar);
        view.MenuItems.Add(viewStatusBar);

        Menu = mainMenu;
        Size = new Size(250, 200);

        CenterToScreen();
    }

    void OnExit(object sender, EventArgs e) {
       Close();
    }

    void ToggleStatusBar(object sender, EventArgs e) {
        bool check = viewStatusBar.Checked;
        if (check) {
            sb.Visible = false;
            viewStatusBar.Checked = false;
        } else {
            sb.Visible = true;
            viewStatusBar.Checked = true;
        }
    }

}

class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}
</pre>

<p>
We have two menus. File and View. The View menu has a menu item that 
toggles the visibility of the statusbar. 
</p>

<pre class="explanation">
 MainMenu mainMenu = new MainMenu();
</pre>

<p>
In this example, we use the <b class="keyword">MainMenu</b> control. 
To create a menubar, we can use either <b class="keyword">MainMenu</b> or
<b class="keyword">MenuStrip</b> controls. The latter has some additional 
functionality.
</p>

<pre class="explanation">
 viewStatusBar.Checked = true;
</pre>

<p>
This menu item is checked by default, because the statusbar is visible from the start of the application.
</p>

<pre class="explanation">
 bool check = viewStatusBar.Checked;
 if (check) {
     sb.Visible = false;
     viewStatusBar.Checked = false;
 } else {
     sb.Visible = true;
     viewStatusBar.Checked = true;
 }
</pre>

<p>
We determine, if the menu item is checked. We show and hide the statusbar and the check tick depending on 
the <b class="keyword">check</b> value. 
</p>

<br>
<img src="/img/gui/sharpwinf/checkmenuitem.png" alt="Check menu item">
<div class="figure">Figure: Check menu item</div>


<h2>Images, separator</h2>

<p>
We will further enhance our knowledge of the <b class="keyword">MenuStrip</b> control. 
We will create a menu item with an image and show how to separate them with a separator. 
</p>

<div class="codehead">menustrip.cs</div>
<pre class="code">
using System;  
using System.Drawing;
using System.Windows.Forms;  
  
class MForm : Form { 
 
  
  public MForm() {  
    Text = "MenuStrip";  
    Size = new Size(250, 200);
  
    MenuStrip menuStrip = new MenuStrip();  
  
    ToolStripMenuItem titem1 = new ToolStripMenuItem("File");  
    menuStrip.Items.Add(titem1);  
  
    ToolStripMenuItem titem2 = new ToolStripMenuItem("Tools");  
    menuStrip.Items.Add(titem2);  
  
    ToolStripMenuItem subm1 = new ToolStripMenuItem("New");  
    subm1.Image = Image.FromFile("new.png");
    titem1.DropDownItems.Add(subm1);  
  
    ToolStripMenuItem subm2 = new ToolStripMenuItem("Open");  
    subm2.Image = Image.FromFile("open.png");
    titem1.DropDownItems.Add(subm2);  
  
    titem1.DropDownItems.Add(new ToolStripSeparator());

    ToolStripMenuItem subm3 = new ToolStripMenuItem("Exit");  
    subm3.Image = Image.FromFile("exit.png");
    titem1.DropDownItems.Add(subm3);  
  
    subm3.Click += OnExit;  
    Controls.Add(menuStrip); 
 
    MainMenuStrip = menuStrip;  

    CenterToScreen();
  }    

  public static void Main() {  
    Application.Run(new MForm());  
  }  
  
    void OnExit(object sender, EventArgs e) {
       Close();
    } 
}
</pre>

<p>
We have two menus in our code example. File and Tools. In the File we 
have three menu items with images. We have also one separator.
In this example, the png images must be located in the current working directory.
</p>


<pre class="explanation">
 ToolStripMenuItem subm1 = new ToolStripMenuItem("New");  
 subm1.Image = Image.FromFile("new.png");
 titem1.DropDownItems.Add(subm1); 
</pre>

<p>
Here we create the first menu item. To add an image to the item, we set the 
<b class="keyword">Image</b> property to our image. We create an Image from 
the specified file using the static <b class="keyword">FromFile()</b> method. 
</p>


<pre class="explanation">
 titem1.DropDownItems.Add(new ToolStripSeparator());
</pre>

<p>
Here we add a separator to the File menu. 
</p>


<br>
<img src="/img/gui/sharpwinf/menustrip.png" alt="MenuStrip">
<div class="figure">Figure: Images and separator</div>


<h2>ToolBar</h2>

<p>
Menus group all commands that we can use in an application. Toolbars provide 
a quick access to the most frequently used commands. <b class="keyword">ToolBar</b> 
control is used to display <b class="keyword">ToolBarButton</b> controls. We can 
assign images to the buttons by creating an <b class="keyword">ImageList</b>. We 
than assign the image list to the <b class="keyword">ImageList</b> property of the 
toolbar and assign the image index value to the <b class="keyword">ImageIndex</b> 
property for each <b class="keyword">ToolBarButton</b>.
</p>

<div class="codehead">toolbar.cs</div>
<pre class="code">
using System;
using System.Drawing;
using System.Windows.Forms;

public class MForm : Form
{
  private ImageList toolBarIcons;
  private ToolBarButton save;
  private ToolBarButton exit;
  private ToolBar toolBar;

  public MForm()
  {
    Size = new Size(250, 200);
    Text = "Simple toolbar";

    toolBar = new ToolBar();
    toolBar.Parent = this;
    toolBarIcons = new ImageList();
    save = new ToolBarButton();
    exit = new ToolBarButton();

    save.ImageIndex = 0;
    save.Tag = "Save";
    exit.ImageIndex = 1;
    exit.Tag = "Exit";

    toolBar.ImageList = toolBarIcons;
    toolBar.ShowToolTips = true;
    toolBar.Buttons.AddRange(new ToolBarButton[] {save, exit});
    toolBar.ButtonClick += new ToolBarButtonClickEventHandler(OnClicked);
    
    toolBarIcons.Images.Add(new Icon("new.ico"));
    toolBarIcons.Images.Add(new Icon("exit.ico"));

    CenterToScreen();
  }

  static void Main() 
  {
    Application.Run(new MForm());
  }
  
  void OnClicked(object sender, ToolBarButtonClickEventArgs e) 
  {
      if (e.Button.Tag.Equals("Exit"))
          Close();
  }
}
</pre>

<p>
In our example, we show two buttons on the toolbar. 
</p>

<pre class="explanation">
 toolBar = new ToolBar();
</pre>

<p>
 Here we create the <b class="keyword">ToolBar</b> control. 
</p>

<pre class="explanation">
 toolBarIcons = new ImageList();
</pre>

<p>
An image list is created. 
</p>

<pre class="explanation">
 save = new ToolBarButton();
 exit = new ToolBarButton();
</pre>

<p>
These are two toolbar buttons. 
</p>

<pre class="explanation">
 save.ImageIndex = 0;
</pre>

<p>
We determine which icon from the image list will be used for the save toolbar button. 
</p>

<pre class="explanation">
 toolBar.Buttons.AddRange(new ToolBarButton[] {save, exit});
</pre>

<p>
The <b class="keyword">ToolBarButton</b> controls are added to the toolbar. 
</p>

<pre class="explanation">
 toolBarIcons.Images.Add(new Icon("new.ico"));
 toolBarIcons.Images.Add(new Icon("exit.ico"));
</pre>

<p>
Icons are added to the image list.
</p>

<pre class="explanation">
 if (e.Button.Tag.Equals("Exit"))
     Close();
</pre>

<p>
If the tag of the button equals to "Exit", we close the application. 
</p>

<br>
<img src="/img/gui/sharpwinf/toolbar.png" alt="ToolBar">
<div class="figure">Figure: ToolBar</div>

<hr class="btm">

<p>
This part of the Winforms tutorial was about menus and toolbars. 
</p>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified December 27, 2008  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
